<template>
<div class="swiper_na">
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in navList" :key='index'><img :src="item.image_url" alt=""></div>
        <!-- <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div> -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
 
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import {mapState} from 'vuex'
export default {
    data () {
        return {
        }
    },
    computed:{
        ...mapState('main',['navList'])
    },
    autoplay: {
        disableOnInteraction: false, //手动滑动之后不打断播放
        delay: 2000
    },
    updated(){
        // if(this.navList.length>0){
            var mySwiper = new Swiper('.swiper-container', {
                loop: true,
                speed: 2000,
                //  slidesPerView: 4,
                autoplay: {
                    disableOnInteraction: false, //手动滑动之后不打断播放
                    delay: 200
                },
                observer: true, //监听，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
                pagination: {
                    el: ".swiper-pagination"
                }
            })
        // }
        
    }
}
</script>

<style lang='scss' scoped>
.swiper_na{
    padding:.2rem;
}
.swiper-container {
  width: 100%;
  height: 2.8rem;
  background: rebeccapurple;
  img{
      width: 100%;
  }
}
</style>
